<template>
  <div class="shipToAddress">
    <div class="nav-top">
      <NavTopReturn title="收货地址"></NavTopReturn>
    </div>
    <div class="content">
      <div class="item">
        <van-address-list
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        :switchable="false"
        @edit="onEdit"
      />
    </div>
    <div class="kong" v-if="(list.length === 0)">

      <van-empty image="error" description="没有地址数据" />
    </div>
    </div>
  </div>
</template>

<script>
import NavTopReturn from "../components/NavTopReturn.vue";
export default {
  name: "ShipToAddress",
  components: {
    NavTopReturn,
  },

  data() {
    return {
      list:[] ,
      chosenAddressId: '',
    }
  },
  created() {
    this.getAddressData();
  },
  methods:{
    // 跳转到添加地址页面
    onAdd() {
      this.$router.push({name:"AppShipToAnd"})
    },
    //编辑地址
    onEdit(item) {
      //编辑地址需要传一个ID
      this.$router.push({name:"AppShipToAnd",query:{aid:item.areaCode}})
      console.log("itme=>",item);
      //aid  编辑地址得ID
    },

  

    //获取本地保存地址
    getAddressData(){
      let bendiAddress = JSON.parse(localStorage.getItem("addressData"));

      console.log("bendiAddress=>",bendiAddress);

      //遍历本地地址
      bendiAddress.forEach(item => {
        item.address = `${item.province}${item.city}${item.county}${item.addressDetail}`;

      });
      this.list = bendiAddress
    }
  }
};
</script>

<style lang="scss" scoped>
.content{
     overflow-y: hidden;
}

  .right {
    background: url("../assets/dizhijinglingtu.png") no-repeat -9px -7px;
    width: 44px;
    height: 46px;
    margin-top: 5px;
  }
  .dress {
    font-size: 16px;
    color: #999;
    margin-top: 10px;
    width: 310px;
  }
  .title {
    display: flex;
    .name {
      font-size: 16px;
      color: #f5a623;
      margin-right: 10px;
      line-height: 20px;
    }
    .tel {
      font-size: 16px;
    }
  }

.shipToAddress {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #f5f5f5;
  overflow-y: auto;
}
.nav-top {
  margin-bottom: 25px;
  height: 50px;
}
.btn {
  width: 80%;
  height: 40px;
  background-color: #ff1a02;
  color: white;
  line-height: 40px;
  text-align: center;
  border-radius: 20px;
  margin: 10px  auto;
}
</style>